{include file="header/index" /}
		<div id="content" class="container whitebg agreement">
			<form class="form-inline mt15 mb15">
				<div class="form-group mr20">
					<label>装机时间</label>
					<input class="form-control input-time" type="text" id="datetimeStart" readonly class="form_datetime">
					<input class="form-control input-time" type="text" id="datetimeEnd" readonly class="form_datetime">
				</div>
				<div class="form-group mr20">
					<input type="text" id="contract_no" name="contract_no" class="form-control input-min" placeholder="请输入合同编号">
				</div>
				<div class="form-group mr20">
					<input type="text" id="username" name="username" class="form-control input-min" placeholder="请输入户名">
				</div>
				<div class="form-group">
					<input type="text" id="telphone" class="form-control input-min" placeholder="请输入联系电话">
				</div>
				<div class="form-group mr20">
					<input type="text" id="id_card" name="id_card" class="form-control input-max" placeholder="请输入身份证号名">
				</div>
				<div class="form-group">
					<input type="text" id="address" class="form-control input-max" placeholder="请输入服务地址">
				</div>
				<div class="form-group mr20 mt15">
					<label>续费时间</label>
					<input class="form-control input-time" type="text" id="datetimeStart_renew" readonly class="form_datetime">
					<input class="form-control input-time" type="text" id="datetimeEnd_renew" readonly class="form_datetime">
				</div>
				<div class="form-group mr20 mt15">
					<label>用户地址</label>
					<select id="operation" name="" onChange="move()" class="form-control input-min">
						<option value="">所属运营中心</option>
						{volist name="operation" id="op"}
						<option value="{$op.o_id}">{$op.company_name}</option>
						{/volist}
					</select>
					<select id="administrative" name="" class="form-control input-min">
						<option value="">所属区域</option>
						{volist name="administrative" id="ad"}
						<option value="{$ad.a_id}">{$ad.company_name}</option>
						{/volist}
					</select>
				</div>
				<button type="button" id="search" class="btn btn-default mt15 input-Btn">搜索</button>
				<button type="reset" class="btn btn-default mt15 input-Btn">清除</button>
				<!--<button type="button" class="btn btn-primary input-Btn colorwhite mt15 fr" data-toggle="modal" data-target="#add_contract">-->
					<!--<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增合同-->
				<!--</button>-->
			</form>
			<form id="form1"  method="Post">
				<table class="table table-bordered">
					<tr>
						<th>合同编号</th>
						<th>户名</th>
						<th>公司名称</th>
						<th>身份证号</th>
						<th>装机时间</th>
						<th>是否升级</th>
						<th>换芯时间</th>
						<th>服务费用</th>
						<th>续费周期（年）</th>
						<th>设备数</th>
						<th>换芯周期（月）</th>
						<th>操作</th>
					</tr>
					<script id="list-template" type="text/html">
						{{# for(var i=0;i<d.length;i++){  }}
						{{#
						if(d[i].is_Expire == 1){
						}}
						<tr class="danger">
							{{#
							}else if(d[i].is_Core == 1){
							}}
						<tr class="warning">
							{{#
							}else{
							}}
						<tr>
							{{#
							}
							}}
							<td>{{d[i].contract_no}}</td>
							<td>{{d[i].username}}</td>
							<td>{{# if(d[i].corporate_name==null||d[i].corporate_name==''){ }}

								{{# }else{ }}
								{{d[i].corporate_name}}
								{{# } }}
							</td>
							<td>{{d[i].id_card}}</td>
							<td>{{d[i].installed_time}}</td>
							<td>{{d[i].contract_type}}</td>
							<td>{{d[i].for_core_time}}</td>
							<td>￥{{d[i].for_core_cost}}元</td>
							<td>{{d[i].renew_date}}</td>
							<td>{{d[i].EquipmentNumber}}</td>
							<td>{{d[i].for_core_cycle}}</td>
							<td>
								<a href="{:url('Contractinfo/details')}?contract_id={{d[i].contract_id}}">查看</a>
								<!--<a href="{:url('Contractinfo/editContract')}?contract_id={{d[i].contract_id}}">修改</a>-->
								<!--<a href="#">增加合同</a>-->
							</td>
						</tr>
						{{# } }}
					</script>
					<tbody id="list-content"></tbody>
				</table>
			</form>
			<span><i style="width: 12px;background: #f2dede">&nbsp;&nbsp;&nbsp;&nbsp;</i>：合同到期</span>
			<span><i style="width: 12px;background: #fcf8e3">&nbsp;&nbsp;&nbsp;&nbsp;</i>：换芯到期</span>
			<div class="clearfix" style="float:right;margin: 0 auto;">
				<span class="fl mt5" id="count">共{$count}条数据</span><span id="allpage"  class="fl  mr20 mt5"></span><span  class="fl" id="AjaxPage"></span>
			</div>
			<!-- 加载动画 -->
			<div class="spiner-example">
				<div class="sk-spinner sk-spinner-three-bounce">
					<div class="sk-bounce1"></div>
					<div class="sk-bounce2"></div>
					<div class="sk-bounce3"></div>
				</div>
			</div>

			<!--<div class="batchdelbtn" onclick="delmseeage('是否删除所有选中的信息')">批量删除</div>-->
			<div class="clearfix"></div>
			<input type="hidden" id="hidden_datetimeStart" value="">
			<input type="hidden" id="hidden_datetimeEnd" value="">
			<input type="hidden" id="hidden_datetimeStart_renew" value="">
			<input type="hidden" id="hidden_datetimeEnd_renew" value="">
			<input type="hidden" id="hidden_contract_no" value="">
			<input type="hidden" id="hidden_username" value="">
			<input type="hidden" id="hidden_id_card" value="">
			<input type="hidden" id="hidden_operation" value="">
			<input type="hidden" id="hidden_administrative" value="">
			<input type="hidden" id="hidden_address" value="">
			<input type="hidden" id="hidden_telphone" value="">
		</div>

<!-- 新增合同 -->
<div class="modal fade" id="add_contract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">新增合同</h4>
			</div>
			<div class="modal-body">
				<p>选择用户</p>
				<form class="form-inline mt25 mb25">
					<div class="form-group">
						<input type="text" class="form-control" id="exampleInputName2" placeholder="请输入身份证号">
					</div>
					<button type="button" class="btn btn-primary">搜索</button>
				</form>
				<table class="table">
					<tr>
						<th><input type="checkbox" onclick="selectall(this,'modelbox')" /></th>
						<th>账号</th>
						<th>户名</th>
						<th>联系人</th>
						<th>身份证号</th>
						<th>账户状态</th>
					</tr>
					<tr>
						<td><input type="checkbox" name="modelbox" /></td>
						<td>158896132185</td>
						<td>张三</td>
						<td>15555555555</td>
						<td>500102199306046708</td>
						<td>正常</td>
					</tr>
				</table>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<button type="button" class="btn btn-primary nextbtn" data-toggle="modal">下一步</button>
			</div>
		</div>
	</div>
</div>

<!-- 新增合同详情 -->
<div class="modal fade" id="add_contract_details" tabindex="-2" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document" style="width: 1000px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">新增合同</h4>
			</div>
			<div class="modal-body model_contract" style="overflow-y: scroll;">
				<div class="user_information">
					<p class="title mb20">用户信息</p>
					<table class="table">
						<tr>
							<th>账号</th>
							<th>户名</th>
							<th>联系人</th>
							<th>身份证号</th>
							<th>账户状态</th>
						</tr>
						<tr>
							<td>158896132185</td>
							<td>张三</td>
							<td>15555555555</td>
							<td>500102199306046708</td>
							<td>正常</td>
						</tr>
						<tr>
							<td>158896132185</td>
							<td>张三</td>
							<td>15555555555</td>
							<td>500102199306046708</td>
							<td>正常</td>
						</tr>
						<tr>
							<td>158896132185</td>
							<td>张三</td>
							<td>15555555555</td>
							<td>500102199306046708</td>
							<td>正常</td>
						</tr>
					</table>
				</div>
				<div class="contract_information">
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>推荐人</label>
							<input type="text" class="form-control" placeholder="ID号">
						</div>
						<div class="form-group col-md-6">
							<label>合同编号</label>
							<input type="text" class="form-control" placeholder="请输入合同编号">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>合同金额</label>
							<input type="text" class="form-control" placeholder="请输入合同金额">
						</div>
						<div class="form-group col-md-6">
							<label>装机时间</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="请选择装机时间">
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>联系人</label>
							<input type="text" class="form-control" placeholder="请输入联系人">
						</div>
						<div class="form-group col-md-6">
							<label>联系电话</label>
							<input type="text" class="form-control" placeholder="请输入联系电话">
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>工程人员</label>
							<input type="text" class="form-control" placeholder="请输入工程人员">
						</div>
						<div class="form-group col-md-6">
							<label>续费周期</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="请选择到期时间">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>原始配件</label>
							<input type="text" class="form-control" placeholder="请输入原始配件">
						</div>
						<div class="form-group col-md-6">
							<label>换芯周期</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="请选择换芯周期">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15 Installed_model">
						<div class="form-group col-md-12">
							<label>装机型号</label>
							<select name="">
								<option value="">1</option>
								<option value="">1</option>
								<option value="">1</option>
							</select>
							<input type="text" placeholder="请输入设备号" />
							<div class="btn btn-default">自动生成&nbsp;&nbsp;<i class="glyphicon glyphicon-repeat"></i></div>
							<div class="btn btn-default" onclick="addmodel()"><i class="glyphicon glyphicon-plus"></i></div>
						</div>
						<div class="form-group col-md-12">
							<label></label>
							<select name="">
								<option value="">1</option>
								<option value="">1</option>
								<option value="">1</option>
							</select>
							<input type="text" placeholder="请输入设备号" />
							<div class="btn btn-default">自动生成&nbsp;&nbsp;<i class="glyphicon glyphicon-repeat"></i></div>
							<div class="btn btn-default" onclick="delmodel(this)"><i class="glyphicon glyphicon-minus"></i></div>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-12">
							<label>最近一次换芯时间</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>换芯时间</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
						<div class="form-group col-md-6">
							<label>免费换芯次数</label>
							<input type="text" class="form-control" value="3次">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15">
						<div class="form-group col-md-6">
							<label>续费时间</label>
							<input type="text" value="" readonly class="form_datetime form-control" placeholder="">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
						<div class="form-group col-md-6">
							<label>免费移机次数</label>
							<input type="text" class="form-control" value="3次">
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15 userstate">
						<div class="form-group col-md-6">
							<label>账户状态</label>
							<select name="">
								<option value="">1</option>
								<option value="">1</option>
								<option value="">1</option>
							</select>
							<i class="glyphicon glyphicon-asterisk"></i>
						</div>
					</form>
					<form class="form-inline clearfix mt15 mb15 userstate">
						<div class="form-group col-md-12 contractRemarks" id="wordCount">
							<label>备注</label>
							<textarea class="form-control" style="width: 70%;" rows="8"></textarea>
							<span class="wordwrap1"><var class="word">500</var>/500</span>
						</div>
					</form>
					<div class="col-md-12 upload_contract">
						<label class="fl">上传合同</label>
						<div class="enclosurelist fl">
							<div class="enclosureitem fl">
								<img src="../../images/enclosure.png" />
								<i class="glyphicon glyphicon-remove" onclick="delcontract(this)"></i>
							</div>
							<div class="enclosureitem fl">
								<img src="../../images/enclosure.png" />
								<i class="glyphicon glyphicon-remove" onclick="delcontract(this)"></i>
							</div>
							<div class="enclosureitem fl">
								<img src="../../images/enclosure.png" />
								<i class="glyphicon glyphicon-remove" onclick="delcontract(this)"></i>
							</div>
							<div class="enclosureitem fl">
								<img src="../../images/enclosure.png" />
								<i class="glyphicon glyphicon-remove" onclick="delcontract(this)"></i>
							</div>
							<div class="upload fl">
								<i class="glyphicon glyphicon-plus"></i>
								<input type="file" name="" id="" value="" />
							</div>
							<div class="clearfix"></div>
							<p>备注：支持上传JPG、JPEG、PONG、GIF格式图片上传，最多上传6张</p>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary savebtn">保存</button>
				<button type="reset" class="btn resetbtn">重置</button>
				<button type="button" class="btn btn-default backbtn">返回</button>
			</div>
		</div>
	</div>
</div>

</body>

</html>
<script type="text/javascript">
    //日期选择
    $("#datetimeStart").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
    });
    $("#datetimeEnd").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
    });
    //日期选择
    $("#datetimeStart_renew").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeStart_renew").datetimepicker("setEndDate", $("#datetimeEnd_renew").val());
    });
    $("#datetimeEnd_renew").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeEnd_renew").datetimepicker("setStartDate", $("#datetimeStart_renew").val());
    });


    //搜索
    $('#search').click(function () {
		$("#hidden_datetimeStart").val($("#datetimeStart").val());
		$("#hidden_datetimeEnd").val($("#datetimeEnd").val());
		$("#hidden_datetimeStart_renew").val($("#datetimeStart_renew").val());
		$("#hidden_datetimeEnd_renew").val($("#datetimeEnd_renew").val());
		$("#hidden_contract_no").val($("#contract_no").val());
		$("#hidden_username").val($("#username").val());
		$("#hidden_id_card").val($("#id_card").val());
		$("#hidden_operation").val($("#operation").val());
		$("#hidden_administrative").val($("#administrative").val());
        $("#hidden_address").val($("#address").val());
        $("#hidden_telphone").val($("#telphone").val());
        Ajaxpage();
    });
    Ajaxpage();
    function Ajaxpage(curr){
        var datetimeStart = $("#hidden_datetimeStart ").val();
        var datetimeEnd = $("#hidden_datetimeEnd ").val();
        var datetimeStart_renew = $("#hidden_datetimeStart_renew ").val();
        var datetimeEnd_renew = $("#hidden_datetimeEnd_renew ").val();
        var contract_no = $('#hidden_contract_no').val();
        var username = $('#hidden_username').val();
        var id_card = $('#hidden_id_card').val();
        var operation = $('#hidden_operation').val();
        var administrative = $('#hidden_administrative').val();
        var address = $('#hidden_address').val();
        var telphone = $('#hidden_telphone').val();
        $.getJSON('{:url("Contractinfo/index")}', {page: curr || 1,telphone:telphone,address:address,datetimeStart_renew:datetimeStart_renew,datetimeEnd_renew:datetimeEnd_renew,datetimeStart:datetimeStart,datetimeEnd:datetimeEnd,contact_person:username,contract_no:contract_no,id_card:id_card,operation_id:operation,administrative_id:administrative}, function(data){
//            console.log(data);
            $(".spiner-example").css('display','none'); //数据加载完关闭动画
            if(data.data==''){
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
                $('#count').html("共"+data.page.count+"条数据");
                $("#allpage").css('display','none');
                $("#AjaxPage").css('display','none');
            }else{
                var tpl = document.getElementById('list-template').innerHTML;
                laytpl(tpl).render(data.data, function(html){
                    document.getElementById('list-content').innerHTML = html;
                    $('#count').html("共"+data.page.count+"条数据");
                    $("#allpage").css('display','');
                    $("#AjaxPage").css('display','');
                });
                laypage({
                    cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
                    pages:data.page.lastPage,//总页数
                    skip: true,//是否开启跳页
                    skin: '#337ab7',//分页组件颜色
                    curr: curr || 1,
                    first: '首页', //若不显示，设置false即可
                    last: '尾页', //若不显示，设置false即可
                    groups: 3,//连续显示分页数
                    jump: function(obj, first){
                        if(!first){
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('，第'+ obj.curr +'页，共'+ '<i>'+obj.pages+'</i>' +'页');
						inputlength();
                    }
                });
            }
        });
    }


	//复选框选中
	function checkAll(obj) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}

	function selectAll() {
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById("all").checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById("all").checked = false;
		}
	}

	//删除(支持批量删)
	function del() {
        var str = [];
        $.each($('input:checkbox:checked'),function(){
            str.push($(this).val());
        });
        $.get("{:url('Contractinfo/delete')}",{data:str},function (flag) {
            Ajaxpage();

        })
    }
    //批量删除弹窗
    function delmseeage(txt, obj) {
        if($('.select').is(':checked')) {
            layer.alert(txt, {
                btn: ['确认', '取消'], //按钮
            }, function() {
                delselected(obj);
                layer.msg('删除成功', {
                    time: 1000,
                    icon: 1
                });
            });
        } else {
            layer.msg('你还未选中', {
                time: 1000,
                icon: 0
            });
        }
    }

    function delselected(obj) {
        $('.select').each(function() {
            if($(this).is(':checked')) {
                $(this).parents('tr').remove();
            }
        })
    }

    //选择地址
	function move() {
		var operation = $("#operation").val();
//        console.log(operation);
		$.get("{:url('Contractinfo/selectAdministrative')}",{operation:operation},function (data) {
            $("#administrative").empty();
            $("#administrative").append($("<option>").val("").text("所属区域"));
            for (var i = 0;i<data.length;i++){
                var option = $("<option>").val(data[i].a_id).text(data[i].company_name);
                $("#administrative").append(option);
			}

        })
    }
    //新增合同model下一步
    $('.nextbtn').click(function() {
        if($('#add_contract input[type="checkbox"]').is(':checked')) {
            $("#add_contract").modal("hide");
            $("#add_contract_details").modal("show");
        } else {
            layer.msg('你还未选中', {
                time: 1000,
                icon: 0
            });
        }
    })

    //model高度自适应
    $(document).ready(function() {
        var height = $(window).height() - 120;
        $(".model_contract").css("height", height * 0.9)
    });

    //增加 删除
    function addmodel() {
        var html = '<div class="form-group col-md-12">';
        html += '<label></label>';
        html += '<select name="" style="margin-right: 4px; margin-left: 4px">';
        html += '<option value="">1</option>';
        html += '<option value="">1</option>';
        html += '<option value="">1</option>';
        html += '</select>';
        html += '<input type="text" placeholder="请输入设备号" style="margin-right: 4px;" />';
        html += '<div class="btn btn-default" style="margin-right: 4px;">自动生成&nbsp;&nbsp;<i class="glyphicon glyphicon-repeat"></i></div>';
        html += '<div class="btn btn-default" onclick="delmodel(this)" style="margin-right: 5px;"><i class="glyphicon glyphicon-minus"></i></div>';
        html += '</div>';
        $('.Installed_model').append(html);
    }

    function delmodel(obj) {
        $(obj).parent().remove();
    }

    //剩余字数统计
    $(function() {
        //先选出 textarea 和 统计字数 dom 节点
        var wordCount = $("#wordCount"),
            textArea = wordCount.find("textarea"),
            word = wordCount.find(".word");
        //调用
        statInputNum(textArea, word);
    });
    //注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
    function statInputNum(textArea, numItem) {
        var max = numItem.text(),
            curLength;
        textArea[0].setAttribute("maxlength", max);
        curLength = textArea.val().length;
        numItem.text(max - curLength);
        textArea.on('input propertychange', function() {
            var _value = $(this).val().replace(/\n/gi, "");
            numItem.text(max - _value.length);
        });
    }

    //删除合同
    function delcontract(obj) {
        layer.confirm('你确定删除此合同吗？', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            layer.msg('删除成功', {
                time: 1000,
                icon:1
            })
            $(obj).parent().remove();
        });
    }

    //返回
    $('.backbtn').click(function() {
        $("#add_contract_details").modal("hide");
        $("#add_contract").modal("show");
    })
    //保存
    $('.savebtn').click(function() {
        layer.msg('保存成功', {
            time: 1000,
            icon:1
        })
    })
    //重置
    $('.resetbtn').click(function() {
        layer.msg('重置成功', {
            time: 1000,
            icon:1
        })
        for(var i = 0; i < $('.contract_information form').length; i++) {
            $('.contract_information form')[i].reset();
        }
    })
</script>